Validate Forms

• Text Box
Please enter your last name.




SAMPLE CODE <form onSubmit="return checkForLastName();"> Please enter your last name. <br> <input type="text" id="lastNameField"> <br> <input type="submit" value="Submit Form"> </form> function checkForLastName() { var targetedField = document.getElementById("lastNameField") if (targetedField.value.length == 0) { alert("Please enter your last name"); targetedField.focus(); targetedField.style.background = "yellow"; return false; } targetedField.style.background = "white"; }
• Drop Down
SELECT a STATE Alabama Alaska Arizona Arkansas   
SAMPLE CODE <form onSubmit="checkForSelection();"> <select id="states"> <option value ="" selected="selected">SELECT a STATE</option> <option value="AL"> Alabama</option> <option value="AL"> Alaska</option> <option value="AL"> Arizona</option> <option value="AL"> Arkansas</option> </select>    <input type="submit" value="Submit Form"> </form> function checkForSelection() { var target = document.getElementById("states"); if (target.selectedIndex == 0) { alert("Please select a state."); return false; } }
• Radio Buttons
Cat
Bat
Hat

SAMPLE CODE <form onsubmit="return validateRadios();"> <input type="radio" name="r1" value="cat"> Cat<br> <input type="radio" name="r1" value="bat"> Bat<br> <input type="radio" name="r1" value="hat"> Hat<br> <input type="submit" value="Submit form"> </form> function validateRadios() { var radios = document.getElementsByName("r1"); for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { return true; } } alert("Please check one."); return false; }